import React from 'react'
import { 
  Header, 
  Footer, 
  Carousel, 
  SideMenu, 
  ProductCollection,
  BusinessPartners 
} from '../../components'
import { Row, Col, Typography, Spin } from 'antd'
import { productList1, productList2, productList3 } from './mockups'
import sideImage1 from '../../assets/images/sider_2019_02-04-2.png'
import sideImage2 from '../../assets/images/sider_2019_02-04.png'
import sideImage3 from '../../assets/images/sider_2019_12-09.png'
import style from './HomePage.module.css'
import { withTranslation, WithTranslation } from 'react-i18next'
import axios from 'axios'
import { connect } from 'react-redux'
import { RootState } from '../../redux/store'
import {
  giveMeDataActionCreator
} from '../../redux/recommendProducts/recommendProductsActions'
import { MainLayout } from '../../layouts/mainLayout'

// state映射
const mapStateToProps = (state: RootState) => {
  return {
    loading: state.recommendProducts.loading,
    error: state.recommendProducts.error,
    productList: state.recommendProducts.productList
  }
}

// axios.get('http://123.56.149.216:8080/api/touristRoutes/fb6d4f10-79ed-4aff-a915-4ce29dc9c7e1').then(response => {
//   console.log('proxy测试', response)
// })

// dispatch映射
const mapDispatchToProps = (dispatch) => {
  return {
    giveMeData: () => {
      dispatch(giveMeDataActionCreator())
    }
  }
}

type PropsType = WithTranslation & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>

class HomePageComponent extends React.Component<PropsType> {

  componentDidMount() {
    this.props.giveMeData()
  }
  
  render() {
    const { t, loading } = this.props
    if (loading) {
      return <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: "auto",
          marginRight: "auto",
          width: "100%"
        }}
      ></Spin>
    }
    return <>
      {/* <Header></Header>
      <div className={style['page-content']}> */}
      <MainLayout>
        <Row style={{marginTop: '20px'}}>
          {/* 1 : 3 布局 */}
          <Col span={6}>
            <SideMenu></SideMenu>
          </Col>
          <Col span={18}>
            <Carousel></Carousel>
          </Col>
        </Row>
        <ProductCollection 
          title={<Typography.Title level={3} type="warning">
            {t("home_page.hot_recommended")}
          </Typography.Title>}
          sideImage={sideImage1}
          products={productList1}
        ></ProductCollection>
        <ProductCollection 
          title={<Typography.Title level={3} type="danger">
            {t("home_page.new_arrival")}
          </Typography.Title>}
          sideImage={sideImage2}
          products={productList2}
        ></ProductCollection>
        <ProductCollection 
          title={<Typography.Title level={3} type="success">
            {t("home_page.domestic_travel")}
          </Typography.Title>}
          sideImage={sideImage3}
          products={productList3}
        ></ProductCollection>
        <BusinessPartners></BusinessPartners>
      {/* </div>
      <Footer></Footer> */}
      </MainLayout>
    </>
  }
}
// 第一个括号代表语言所使用的命名空间,第二个括号是组件,相当于一个高阶组件的高阶组件
// connect第一个小括号表示store的映射数据,第二个小括号放入组件
export const HomePage = connect(mapStateToProps, mapDispatchToProps)(withTranslation()(HomePageComponent))
